<template>
  <div>
    部门设置-添加
    <div class="app-container">
      <div class="search-container">
        <el-row>
          <el-col :span="6" :offset="0" />
          <el-tree style="max-width: 600px" :data="datas" :props="defaultProps" default-expand-all
            @node-click="handleNodeClick" :expand-on-click-node="false" />
          <el-col :span="6" :offset="0" />
          <div>
            <h1>部门信息</h1>
            <el-form :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item label="部门上级">
                <el-input v-model="form.departLevel" />
              </el-form-item>

              <el-form-item label="部门名称">
                <el-input v-model="form.departName" />
              </el-form-item>

              <el-form-item label="部门状态">
                <el-radio-group v-model="form.departState">
                  <el-radio label="启用" :value="1">启用</el-radio>
                  <el-radio label="禁用" :value="2">禁用</el-radio>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="部门类型">
                <el-select v-model="form.departTypeId" placeholder="请选择" clearable>
                  <el-option label="生产管理" :value="1" />
                  <el-option label="销售管理" :value="2" />
                  <el-option label="财务管理" :value="3" />
                </el-select>
              </el-form-item>

              <el-form-item label="部门序号">
                <el-input v-model="form.pid" />
              </el-form-item>
            </el-form>
            <h1>任职信息</h1>
            <el-form :model="form" label-width="auto" style="max-width: 600px">
              <el-form-item label="部门主管">
                <el-input v-model="form.createName" />
              </el-form-item>

              <el-form-item label="分管负责人">
                <el-input v-model="form.updateName" />
              </el-form-item>

              <el-button @click="Add()">添加</el-button>
            </el-form>
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
//引用
import { ref, onMounted, reactive } from "vue";
import PurchaseAPI from "@/api/OrganizationalAdministration/index";
import vendor, { getDepart, AddDepart } from "../../../api/DepartMent/index";

import { ElMessageBox, ElMessage, UploadInstance } from "element-plus";
import AddSupplier from "./addSupplier.vue";
import { useRouter } from "vue-router";

onMounted(() => {
  menuList();
});

const form = reactive({
  departName: "",
  departTypeId: null,
  departLevel: "",
  departState: null,
  pid: null,
  createName: "",
  createTime: "2024-07-08",
  updateName: "",
  updateTime: "2024-07-08",
  isdelete: 0,
});

const forminlie = reactive({
  hasChild: false, //是否有子信息
});

const datas = ref([]);

const menuList = () => {
  vendor.MenuList().then((res) => {
    datas.value = res.data;
  });
};

const handleNodeClick = (data: any) => {
  // form.departId = data.value;
  form.departLevel = data.label;
  form.pid = data.value;
  forminlie.hasChild = data.children != null ? true : false;
};

const defaultProps = {
  children: "children",
  label: "label",
  value: "value",
};

const Add = () => {
  console.log(form);

  vendor.DepartAdd(form).then(function (res: any) {
    if (res.code > 0) {
      ElMessage.success("添加成功");
    } else {
      ElMessage.error("添加失败");
    }
  });
};
</script>
